<script setup lang="ts">
import { CancelOrderAPI } from '@/apis/cancelOrder'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const id = ref('')

const cancelReason = ['距离太远', '乘客电话拨打不通', '乘客定位坐标不明确']

const formRef = ref<any>(null)
const formData = ref({
  reason: '',
  note: '',
})

// 表单校验规则
const rules = {
  reason: [
    { required: true, message: '取消原因不可为空', trigger: ['blur', 'change'] },
  ],
}

async function handleSubmit() {
  const res = await CancelOrderAPI({
    orderid: id.value,
    order_status: '-1',
    reson: formData.value.reason,
    remark: formData.value.note,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1)
    return
  uni.showModal({
    title: '取消成功',
    showCancel: false,
    success: () => router.back(),
  })
}
</script>

<template>
  <view class="px-24rpx">
    <Spacer h="44" />
    <view class="flex items-baseline">
      <image
        class="mr-26rpx mt-8rpx h-26rpx w-28rpx flex-none"
        src="@/static/images/warning_tr.png"
      />
      <view class="text-28rpx text-#707070 leading-44rpx">
        注：取消订单系统会自动记录，取消次数过多注：取消订单系统会自动记录，取消次数过多注：取消订单系统会自动记录，取消次数过多
      </view>
    </view>
    <Spacer h="34" />
    <uv-form ref="formRef" :model="formData" :rules="rules">
      <view class="rounded-10rpx bg-white p-40rpx">
        <view class="text-28rpx text-#333333 leading-40rpx">
          选择取消订单的原因
        </view>
        <Spacer h="40" />
        <uv-form-item prop="reason" :custom-style="{ padding: 0, margin: 0 }">
          <RGRadioGroup
            :items="cancelReason"
            :selected="formData.reason"
            @change="(v) => formData.reason = v"
          />
        </uv-form-item>
      </view>
      <Spacer h="20" />
      <view class="rounded-10rpx bg-white p-40rpx">
        <view class="text-28rpx text-#333333 leading-40rpx">
          其他原因
        </view>
        <Spacer h="40" />
        <uv-form-item prop="note" :custom-style="{ padding: 0, margin: 0 }">
          <textarea
            v-model="formData.note"
            placeholder="请输入您的取消原因"
            class="h-160rpx rounded-10rpx bg-#F5F5F5 p-24rpx text-#333333"
            placeholder-class="text-#8F8F8F"
          />
        </uv-form-item>
      </view>
    </uv-form>
  </view>

  <view class="fixed bottom-40rpx x-center">
    <RGButton @tap="handleSubmit">
      提交
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'cancelOrder'
style:
  navigationBarTitleText: '取消订单'
</route>
